<!-- 编辑双向评分弹窗 -->

<template>
  <div class="edit-box">
    <div class="item-box">
      <div class="title">考核期：</div>
      <div class="content-size">{{ date }}</div>
    </div>

    <div class="item-box">
      <div class="title">评分指标：</div>
      <div class="content-size" v-if="this.differentiate===1 || this.differentiate===2">{{ editData.indexValueName }}</div>
      <div class="content-size" v-else>{{ editData.indexName }}</div>
    </div>

    <div class="item-box">
      <div class="title">被评部门：</div>
      <div class="content-size" v-if="this.differentiate===1 || this.differentiate===2">{{ editData.indexDepartName }}</div>
      <div class="content-size" v-else>{{ editData.indexOrgName }}</div>
    </div>

    <div class="item-box">
      <div class="title">责任人：</div>
      <div class="content-size" v-if="this.differentiate===1 || this.differentiate===2">{{ editData.indexScorerName }}</div>
      <div class="content-size" v-else>{{ editData.scorerName }}</div>
    </div>
    <div class="item-box score-box" v-if="this.differentiate===2">
      <div class="title">督办得分：</div>
      <div class="content-size">
        <a-input  class="edit-input" type="number" style="width: 90px;"
                 :value="editData.superviseGrade" @change="change($event, 'superviseGrade')"/>
      </div>
    </div>
    <div class="item-box score-box">
      <div class="title">评分：</div>
      <div class="content-size">
        <a-input  v-if="this.differentiate===1 || this.differentiate===2" class="edit-input" type="number" style="width: 90px;"
                 :value="editData.grade"
                 @change="change($event, 'score')" />
        <a-input  v-else class="edit-input" type="number" style="width: 90px;"
                 :value="editData.scoreValue"
                 @change="change($event, 'score')" />
        <span style="color: red" v-if="this.differentiate===0">*</span><span v-if="this.differentiate===0">(0代表基本符合工作要求，不加分也不减分)</span>
      </div>
    </div>

    <div class="score-comments"
         v-for="(item, index) in editData.scoreComments">
      <div class="item-box">
        <div class="title">评分事项 {{ index + 1 }}：</div>
        <div class="content-title">
          <!--<a-input class="edit-input" type="text"
                   :value="item.title"
                   @change="change($event, 'title', index)" />-->

          <a-select labelInValue :value="{ label: item.title }"
                    @change="change($event, 'title', index)">
            <a-select-option v-for="cItem in scoreItems" :disabled="cItem.disabled"
                             :value="cItem.code">{{ cItem.name }}</a-select-option>
          </a-select>

          <a-icon class="icon-delete" type="delete"
                  title="移除评分项" @click="remove(index)" />
        </div>
      </div>

      <div class="item-textarea">
        <div class="title">评分意见 {{ index + 1 }}：</div>
        <div class="textarea-box">
          <a-textarea class="edit-textarea" type="text"
                      :value="item.content"
                      @change="change($event, 'content', index)" />
        </div>
      </div>
    </div>

    <div class="item-box add-item-box">
      <div class="title"></div>
      <div class="content-size">
        <span class="add-size" @click="addItem()">+ 添加评分项</span>
      </div>
    </div>
  </div>
</template>


<script>
  import ATextarea from 'ant-design-vue/es/input/TextArea';

  /**
   * api 接口
   *
   * gradeEvents => 获取评分事项列表
   * */
  import { gradeEvents } from '@/api/api.js';

  /* 封装通用 api 服务 */
  import { apiService } from '@/api/api.service.js';



  export default {
    name: "edit-score-comments",
    components: { ATextarea },

    props: {
      date: '',
      //differentiate用于角色区分  申嘉文（kpi）  2   孙毅，葛明 0  纪琼霄（gm）  1
      differentiate:0,

      show: {
        type: Boolean,
        default: false
      },

      editData: {
        type: Object,
        default: {}
      }
    },

    data() {
      return {
        scoreItems: []
      }
    },

    created() {
      if(this.editData.scoreComments.length===0){
        this.editData.scoreComments.push({ code: '', title: '', content: '' });
      }

      this.gradeEvents();
      this.$watch('show', (b) => { if (b) { this.autoDisabled(); } });
    },

    methods: {

      /* 监听评分项的改变 */
      change(e, key, ind) {
      debugger;
        if (key === 'title') {
          this.editData.scoreComments[ind].code = e.key;
          this.editData.scoreComments[ind].title = e.label;
          this.autoDisabled();
          return;
        }

        let value = e.target.value;
        if (key === 'score') {
          if (this.differentiate === 0) {

          // 不允许输入小数
          if (value.indexOf('.') >= 0) {
            this.editData.scoreValue = value.split('.')[0];
            this.$message.warning('不允许输入小数！');
            return;
          }

          // TODO ...
          if (value.indexOf('0') === 0 && value.length >= 2 || value.indexOf('-0') === 0 && value.length >= 3) {
            this.editData.scoreValue = '0';
            return;
          }

          // 评分数值限制最大 10 分
          if (value > 10) {
            this.editData.scoreValue = 10;
            this.$message.warning('最大分数为 10 分！');
            return;
          }

          // 评分数值限制最小 (-10) 分
          if (value < (-10)) {
            this.editData.scoreValue = -10;
            this.$message.warning('评分分数不能小于 -10！');
            return;
          }

          this.editData.scoreValue = value;
        }else {
            // 不允许输入小数
            if (value.indexOf('.') >= 0) {
              this.editData.grade = value.split('.')[0];
              this.$message.warning('不允许输入小数！');
              return;
            }

            // TODO ...
            if (value.indexOf('0') === 0 && value.length >= 2 || value.indexOf('-0') === 0 && value.length >= 3) {
              this.editData.grade = '0';
              return;
            }

            // 评分数值限制最大 10 分
            if (value > 10) {
              this.editData.grade = 10;
              this.$message.warning('最大分数为 10 分！');
              return;
            }

            // 评分数值限制最小 (-10) 分
            if (value < (-10)) {
              this.editData.grade = -10;
              this.$message.warning('评分分数不能小于 -10！');
              return;
            }

            this.editData.grade = value;
          }
        }else if (key === 'superviseGrade') {
                   if (this.differentiate === 2) {

                   // 不允许输入小数
                   if (value.indexOf('.') >= 0) {
                     this.editData.superviseGrade = value.split('.')[0];
                     this.$message.warning('不允许输入小数！');
                     return;
                   }

                   // TODO ...
                   if (value.indexOf('0') === 0 && value.length >= 2 || value.indexOf('-0') === 0 && value.length >= 3) {
                     this.editData.superviseGrade = '0';
                     return;
                   }

                   // 评分数值限制最大 10 分
                   if (value > 10) {
                     this.editData.superviseGrade = 10;
                     this.$message.warning('最大分数为 10 分！');
                     return;
                   }

                   // 评分数值限制最小 (-10) 分
                   if (value < (-10)) {
                     this.editData.superviseGrade = -10;
                     this.$message.warning('评分分数不能小于 -10！');
                     return;
                   }

                   this.editData.superviseGrade = value;
                 }
                 } else {
          this.editData.scoreComments[ind][key] = value;
        }
      },

      /* 是否禁用 */
      autoDisabled() {
        let arr = this.editData.scoreComments;

        /* 全部可选 */
        if (arr.length === 0) {
          this.scoreItems.forEach((item) => {
            item.disabled = false;
          });
          return;
        }

        this.scoreItems.forEach((item) => {
          item.disabled = arr.some(ite => ite.title === item.name);
        });
      },

      /* 添加评分项 */
      addItem() {
        this.editData.scoreComments.push({ code: '', title: '', content: '' });
      },

      /* 移除 */
      remove(ind) {
        let arr = this.editData.scoreComments;
        this.editData.scoreComments = arr.filter((item, index) => { return index !== ind; });
        this.autoDisabled();
      },

      /* 获取评分事项 */
      gradeEvents() {
        apiService(gradeEvents()).then((res) => {
          let result = res.result;
          this.scoreItems = result.gradeEvents;
          this.autoDisabled();
        }).catch((error) => {
          this.$message.error(error.message);
        });
      }
    }
  }
</script>



<style lang="less" scoped>
  .edit-box {
    padding-left: 60px;

    .item-box,
    .score-comments {
      overflow: hidden;
    }

    .item-box {
      height: 30px;
      line-height: 30px;
      margin-bottom: 5px;

      input { height: 100%; }
    }

    .score-box {
      margin-bottom: 10px;
      input {width: 70px; }
    }

    .title,
    [class*='content-'],
    .textarea-box {
      height: 100%;
      float: left;
    }

    .title {
      width: 15%;
      color: #a6a6a6;
    }

    .textarea-box,
    [class*='content-'] {
      width: 85%;
    }

    .textarea-box textarea {
      resize: none;
    }

    .icon-delete {
      margin-left: 10px;
      color: #F1523A;
    }

    .score-comments {
      margin-bottom: 10px;

      .content-title {
        position: relative;
      }

      input, textarea,
      /deep/.ant-select {
        width: 85%;
      }
      /deep/.ant-select-selection--single {
        height: 30px;
      }
    }

    .add-item-box {
      margin-top: 20px;

      .add-size {
        cursor: pointer;
        color: @primary-color;
      }
    }
  }
</style>
